// component/progressBar/progressBar.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        width: {
            type: Number,
            value: 400,
        },
        progress: {
            type: Number,
            value: 0,
        },
        height: {
            type: Number,
            value: 30
        },
        percent: {
            type: Number,
            value: 0,
        },
        text: {
            type: String,
            value: ''
        },
        moniter: {
            type: Boolean,
            value: false,
        },
        animation: {
            type: Boolean,
            value: false,
        },
        bgColor: {
            type: String,
            value: '#d8d8d8'
        },
        barColor: {
            type: String,
            value: 'rgb(75, 214, 233)'
        },
        subColor: {
            type: String,
            value: 'rgb(177, 241, 250)'
        },
        itemId: {
            type: String
        },
        item: {
            type: Object
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        progressPercent: 0,
        clickTimer: null
    },
    observers: {
        'percent,progress': function (percent, progress) {
            this.configurePercent()
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        configurePercent() {
            let result = (this.data.percent || this.data.progress)
            if (result > 100) result = 100;
            if (result < 0) result = 0;
            this.setData({
                progressPercent: result
            })
        },
        barTap(e) {
            if (this.data.clickTimer) {
                this.data.clickTimer = clearTimeout(this.data.clickTimer);
                this.triggerEvent('itemDoubleTap', { item: this.data.item, ...e.detail }, {
                    bubbles: true,
                    composed: true
                })
            } else {
                this.data.clickTimer = setTimeout(() => {
                    this.data.clickTimer = null;
                    this.triggerEvent('itemTap', { item: this.data.item, ...e.detail }, {
                        bubbles: true,
                        composed: true
                    })
                }, 200);
            }

        },
        barLongTap(e) {
            this.data.clickTimer = clearTimeout(this.data.clickTimer);
            this.triggerEvent('itemDoubleTap', { item: this.data.item, ...e.detail }, {
                bubbles: true,
                composed: true
            })
        }
    }
})